<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <div class="container pt-36 pb-7.5 px-4 box-border bg-[#f7f7f7]">
    <!-- 头部个人信息 -->
    <div class="top-info py-7.5 px-4 text-[15px] text-[#f7f7f7]">
      <div class="info-item text-[20px]">{{ userInfo.name }}</div>
      <div class="info-item mt-4 mb-2">{{ userInfo.mobile }}</div>
      <div class="info-item">{{ userInfo.address }}</div>
      <!-- 核销 -->
      <div
        class="use-btn flex justify-center items-center"
        v-if="userInfo.role !== 0"
        @click="handleScan"
      >
        <image src="@/static/images/scan.png" mode="widthFix" class="w-[14px]"></image>
        <span class="text-[14px] text-[#fff]">核销</span>
      </div>
    </div>
    <!-- 菜单信息 -->
    <div class="menu pt-2 bg-[#fff] text-[16px] text-[#666666]">
      <button
        v-for="(item, index) in data"
        :key="index"
        :open-type="!item.url && 'share'"
        class="bg-[transparent] text-[16px] text-[#666666] p-0 m-0"
        style="line-height: 0"
        @click="jumpPage(item.url)"
      >
        <div class="menu-item py-4 px-4 flex items-center">
          <image :src="item.icon" mode="widthFix" class="w-[15px] mr-2"></image>
          <div class="label">
            {{ item.label }}
          </div>
          <div class="right">
            <image src="@/static/images/right-arrow2.png" mode="widthFix" class="w-[8px]"></image>
          </div>
        </div>
      </button>
    </div>
    <!-- 退出登录 -->
    <div class="logout mt-10" @click="logout">退出登录</div>
    <!-- 底部电话 -->
    <div class="phone text-[12px] text-[#666666]">客服/投诉电话：{{ servicePhone }}</div>
  </div>
</template>

<script setup lang="ts">
import p1 from '@/static/images/coupon.png'
import p2 from '@/static/images/need.png'
import p3 from '@/static/images/opinion.png'
import p4 from '@/static/images/share.png'
import p5 from '@/static/images/setting.png'
import p6 from '@/static/images/commission.png'
import { checkCoupon, getComplaintPhone, userInformation } from '@/service/user'
import { useStorage } from '@/utils/storage'
import { useToast } from 'wot-design-uni'

const { set, get, clear } = useStorage()

const data = ref([
  {
    icon: p1,
    label: '我的优惠券',
    url: '/pages/coupon/index',
  },
  {
    icon: p2,
    label: '我的需求报送',
    url: '/pages/user/needSubmission/index',
  },
  {
    icon: p3,
    label: '意见反馈',
    url: '/pages/user/feedback/index',
  },
  {
    icon: p4,
    label: '分享小程序',
    url: '',
  },
  {
    icon: p5,
    label: '我的资料',
    url: '/pages/user/userMessage/index',
  },
  {
    icon: p6,
    label: '我的分佣',
    url: '/pages/user/myCommission/index',
  },
])
// 跳转页面
function jumpPage(url: string) {
  if (!url) return
  uni.navigateTo({
    url,
  })
}
// 用户信息
const userInfo = ref<IUserInfo>({})
const getUserInfo = async () => {
  const res: IResData<IUserInfo> = await userInformation()
  if (res.code === 1) {
    userInfo.value = res.data
    set('userInfo', res.data)
  }
}
// 核销二维码
const toast = useToast()
const handleScan = () => {
  uni.scanCode({
    success: async (res) => {
      console.log(res, 'code')
      const data = res.result
      const response: IResData<any> = await checkCoupon(data)
      if (response.code === 1) {
        toast.success('核销成功')
      } else {
        toast.show(response.msg)
      }
    },
  })
}
// 退出登录
const logout = () => {
  clear()
  uni.reLaunch({
    url: '/pages/login/index',
  })
}
const servicePhone = ref<string>('')
const getPhone = async () => {
  const res: IResData<string> = await getComplaintPhone()
  if (res.code === 1) {
    servicePhone.value = res.data
    set('service_phone', res.data)
  }
}
onLoad(async () => {
  await getUserInfo()
  await getPhone()
})
</script>

<style scoped lang="scss">
.container {
  position: relative;
  min-height: 100vh;
  .top-info {
    position: absolute;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 370rpx;
    background: linear-gradient(116deg, #48b760 0%, #6bb748 100%);
    box-sizing: border-box;
    border-radius: 0px 0px 40px 40px;
    .use-btn {
      position: absolute;
      right: 32rpx;
      top: 60rpx;
      width: 120rpx;
      height: 50rpx;
      box-sizing: border-box;
      border-radius: 122px;
      border: 1px solid #ffffff;
      image {
        margin-right: 4rpx;
      }
    }
  }

  .menu {
    position: relative;
    border-radius: 10px;
  }

  .menu-item {
    border-bottom: 1px solid #f7f7f7;
    .right {
      margin-left: auto;
    }
  }

  .logout {
    border-radius: 4px;
    background: #56b756;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .phone {
    position: absolute;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    text-align: center;
  }
}
</style>
